<template>
    <div class="form-container">
        <el-card style="width: 480px">
            <template #header>
                <div class="card-header">
                    <span>管伊佳ERP v3.3</span>
                </div>
            </template>
            <el-form ref="ruleFormRef" style="max-width: 600px" :model="form" :rules="rules" label-width="auto"
                class="demo-ruleForm" :size="formSize" status-icon>
                <el-form-item label="">
                    <el-input v-model="form.userName" placeholder="请输入用户名" />
                </el-form-item>
                <el-form-item label="">
                    <el-input v-model="form.userPwd" placeholder="请输入密码" show-password />
                </el-form-item>
                <el-form-item label="">
                    <el-form-item prop="checkCode">
                        <el-input v-model="form.checkCode" style="width: 120px; " placeholder="请输入验证码" />
                        <el-tag type="primary" size="large" style="width: 80px; font-size: 14px;">{{ form.ShowcheckCode
                            }}</el-tag>
                        <el-link :underline="false" @click="createcheckCode" style="font-size: 10px;">看不清,换一张</el-link>
                    </el-form-item>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="btn">
                    <el-button type="primary" @click="submitForm()" style="width: 240px;">
                        登录
                    </el-button>
                </div>
            </template>
        </el-card>

    </div>

</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const router = useRouter();
const route = useRoute();

const form = reactive({
    userName: "",
    userPwd: "",
    checkCode: '',
    ShowcheckCode: '',
    savepaw: false
})

const createcheckCode = () => {
    const index = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIGKLMNOPQRSTUVWXYZ";
    let tempMode = "";
    for (let i = 0; i < 4; i++) {
        const str = Math.floor(index.length * Math.random());
        tempMode += index[str];
    }
    form.ShowcheckCode = tempMode
}


const submitForm = () => {

};

onMounted(() => {

})


const rules = reactive<FormRules>({
    userName: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    userPwd: [
        { required: true, message: '请输入密码', trigger: 'blur' },
    ],
})

</script>


<style scoped>
.form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background: url(https://fq.malltrace.com/assets/stores/images/banner_login.jpg);
    background-size: 100% 100%;
    /* Full viewport height */
}

.form {
    max-width: 600px;
    max-height: 400px;
    /* Adjust as needed */
    width: 100%;
}

.card-header {
    display: flex;
    justify-content: space-between;
}

.btn {
    display: flex;
    justify-content: space-around;
}
</style>